<template>
	<view>
		<divider></divider>
		<card title="申请售后的产品" cardStyle="background: #FFFFFF">
			<view class="d-flex flex-row a-center px-3 py-2">
				<image src="../../static/images/demo/cate_03.png"
				style="width: 100rpx;height: 100rpx;"></image>
				<view class="flex-1 ml-3 d-flex flex-column">
					<view class="font-md">小米10黑色标配</view>
					<view class="font text-light-muted">
						维修服务：剩余11天
					</view>
				</view>
			</view>
		</card>
		<divider></divider>
		<card title="服务类型" :bodyPadding="true" cardStyle="background: #FFFFFF">
			<zcm-radio-group :label="label" 
			:selected.sync="label.selected"></zcm-radio-group>
		</card>
		<divider></divider>
		<card title="问题描述" cardStyle="background: #FFFFFF">
			<view class="position-relative p-2 border rounded">
				<textarea placeholder="详细描述一下你遇到的问题" :maxlength="maxLength"
				v-model="content"
				class="p-2"
				style="height: 400rpx;width: 100%;box-sizing: border-box;"></textarea>
				<view class="position-absolute text-light-muted" style="right: 5rpx;bottom: 5rpx;">
					{{content.length}}/{{maxLength}}
				</view>
			</view>
			
		</card>
		<view class="p-3">
			<view class="rounded main-bg-color text-white text-center font-md py-2"
			hover-class="main-bg-hover-color">下一步</view>
		</view>
	</view>
</template>

<script>
	import card from "@/components/common/card.vue"
	import zcmRadioGroup from "@/components/common/radio-group.vue"
	
	export default {
		components: {
			card,
			zcmRadioGroup,
		},
		data() {
			return {
				label: {
					selected: 0,
					list: [
						{name: "维修"}
					]
				},
				content: '',
				maxLength: 20,
			}
		},
		methods: {
			
		}
	}
</script>

<style>
page {
	background-color: #EEEEEE;
}
</style>
